<template>
  <base-view :model="query" @submit="search" class="custom" paramsLayout>
    <template v-slot:params>
      <a-col :span="12">
        <a-form-item
          label="批次日期"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 18}">
          <a-range-picker @change="handleDateChange"  style="width: 100%" :disabled-date="disableDate"/>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item style="text-align: center;margin-bottom: 20px " class="search">
          <a-button type="primary" html-type="submit"@click="search">搜索</a-button>
          <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
        </a-form-model-item>
      </a-col>
    </template>
    <div class="section">

      <div class="btn-group">
        <a-button type="primary" @click="exportExcel()">导出</a-button>
      </div>
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        @change="pageChange"
        @showSizeChange="pageChange"
        :loading="loading"
        :pagination="pagination"
        :scroll="{ x: 1500 }"
      >
      </a-table>
    </div>
    <a-modal
      v-model="modalVisible"
      :title="modalTitle"
      width="1050px"
      @ok="submit"
      :maskClosable="false"
      :footer="isHideFoot?null:undefined"
    >
      <mchnt-level-operation ref="modalForm" />
    </a-modal>
  </base-view>
</template>

<script>
import moment from "moment";
import 'moment/locale/zh-cn';

export default {
  data() {
    return {
      moment,
      open:false,
      beanInfo: {},
      modalVisible: false,
      isHideFoot: false,
      modalTitle: "",
      operationType: "add",
      query: { instId: "", startDate: "", endDate: "" , batchDate:"",brandFee:""},
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 0,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      columns: [
        {
          title: "法人行号",
          dataIndex: "instId",
          align: 'left',
          width: 100,
        },
        {
          title: "批次日期",
          dataIndex: "batchDate",
          width: 100,
        },
        {
          title: "品牌服务费(元)",
          dataIndex: "brandFee",
          width: 150,
        }
      ],
      dataSource: [],
    };
  },

  methods: {
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.defaultCurrent = 0;
        await this.search();
      }
    },

    async reset(){
      this.query = {instId:this.query.instId}
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },
    async search(e) {
      e && e.preventDefault && e.preventDefault();
      try {
        const res = await this.$get("/admin/csmc/report/CupsBrandFeeReport/list", {
          instId: this.query.instId,
          startDate: this.query.startDate,
          endDate: this.query.endDate,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
        });
        this.dataSource = res.data.rows;
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },
    exportExcel() {
      let {sortedInfo} = this
      let sortField, sortOrder
      // 获取当前列的排序和列的过滤规则
      if (sortedInfo) {
        sortField = sortedInfo.field
        sortOrder = sortedInfo.order
      }
      this.$export('/admin/csmc/report/CupsBrandFeeReport/excel', {
        sortField: sortField,
        sortOrder: sortOrder,
        ...this.query
      })
    },
    handleDateChange (value) {
      if (value) {
        this.$set(this.query, 'startDate', value[0].format('YYYYMMDD'))
        this.$set(this.query, 'endDate', value[1].format('YYYYMMDD'))
      }
    },
    disableDate(current){
      return current <= moment().subtract(30, 'days') || current > moment().endOf('day');
    },
    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;
      this.search();
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../static/less/Common";
</style>
